<template>
    <div class="cart">
        <Header title="购物车" :edit="true"/>
        <CartDetail v-if="isShow" :changeShow="changeShow"/>
        <Empty v-else/>
        <Footer />
    </div>
</template>

<script>
import Footer from "@/components/Footer.vue"
import Empty from "@/components/Empty.vue";
import Header from "@/components/Header.vue";
import CartDetail from '../Cart/component/CartDetail.vue';
import { useStore } from "vuex";
import { onMounted,ref } from "vue";
export default {
    components:{
        Footer,
        Empty,
        Header,
        CartDetail
    },
    setup(){
        const isShow = ref(true)
        const store = useStore()

        const init = () =>{
            if(store.state.cartList.length ===0){
                isShow.value = false
            }
        }
        const changeShow = ()=>{
            isShow.value = false;
        }

        onMounted(()=>{
            init();
        })


        return{
            isShow,
            changeShow
        }
    }

}
</script>

<style lang="less" scoped>
.cart{
    display: flex;
    flex-flow: column;
    height: 100%;
    .content{
        flex: 1;
        overflow-y: auto;
    }
}
</style>